import React from "react";
import PropTypes from 'prop-types';
import { dateFormat } from "../../lib/utils";
import "../CSS/Footer.css";

function Tag({ list }) {
    return (
        <>
            {list.map((item) => (
                <span key={item} className="tag">
                    {item}
                </span>
            ))}
        </>
    );
}

Tag.propTypes = {
    // eslint-disable-next-line react/forbid-prop-types
    list: PropTypes.any,
    // list: PropTypes.arrayOf(PropTypes.string),
};
Tag.defaultProps = {
    list: [],
};

function Footer(props) {
    const { blogInfo } = props;
    return (
        <section className="footer-wrapper">
            <div className="left">
                <div className="label">分类：</div>
                <div className="label">创建时间：</div>
                {blogInfo.updateTime ? (
                    <div className="label">最近修改：</div>
                ) : (
                    ""
                )}
            </div>
            <div className="right">
                <div className="label tags">
                    <Tag list={blogInfo.tags} />
                </div>
                <div className="label createTime">
                    {dateFormat(new Date(blogInfo.createDate), 'yyyy-MM-dd hh:mm:ss')}
                </div>
                {blogInfo.updateTime ? (
                    <div className="label createTime">
                        {dateFormat(new Date(blogInfo.updateTime), 'yyyy-MM-dd hh:mm:ss')}
                    </div>
                ) : (
                    ""
                )}
            </div>
        </section>
    );
}

Footer.propTypes = {
    blogInfo: PropTypes.shape({
        updateTime: PropTypes.string,
        // eslint-disable-next-line react/forbid-prop-types
        tags: PropTypes.any,
        // tags: PropTypes.arrayOf(PropTypes.string),
        createDate: PropTypes.string,
    }).isRequired,
};

export default Footer;
